<template>
	<!-- 弹框开始 -->
	<uni-popup ref="popup" type="bottom" :showPopup="true">
		<view class="like"> 
			<view class="like-tittle">
				添加个人推荐喜好123
				<i class="iconfont icon-searchclose" @click="close" />
			</view>
			<view class="like-desc">
				  <view class="container">
				    <!-- 商品主信息 -->
				    <view class="goods-info">
				      <image class="goods-image" :src="goodsInfo.image"></image>
				      <view class="price">¥{{selectedPrice || goodsInfo.minPrice}}</view>
				    </view>
				
				    <!-- 规格选择 -->
				    <view class="spec-section" v-for="(spec, index) in specs" :key="index">
				      <view class="spec-title">{{spec.name}}</view>
				      <view class="spec-items">
				        <view 
				          v-for="(item, i) in spec.items" 
				          :key="i"
				          class="spec-item"
				          :class="{
				            'selected': selectedSpecs[spec.name] === item.name,
				            'disabled': !checkSpecAvailable(spec.name, item)
				          }"
				          @click="selectSpec(spec.name, item)"
				        >
				          {{item.name}}
				        </view>
				      </view>
				    </view>
				
				    <!-- 已选规格购物车 -->
				    <view class="cart-section">
				      <view class="cart-title">已选商品</view>
				      <view 
				        v-for="(item, index) in cart" 
				        :key="index"
				        class="cart-item"
				      >
				        <view class="specs-text">{{formatSpecs(item.specs)}}</view>
				        <view class="quantity-control">
				          <button 
				            class="btn minus" 
				            :disabled="item.quantity <= 1"
				            @click="updateQuantity(index, -1)"
				          >-</button>
				          <input 
				            class="quantity-input" 
				            type="number" 
				            v-model="item.quantity"
				            @change="validateQuantity(index)"
				          >
				          <button 
				            class="btn plus" 
				            :disabled="item.quantity >= item.stock"
				            @click="updateQuantity(index, 1)"
				          >+</button>
				          <view class="price">¥{{item.price * item.quantity}}</view>
				        </view>
				      </view>
				    </view>
				
				    <!-- 底部操作栏 -->
				    <view class="footer">
				      <button class="add-cart-btn" @click="addToCart">确认加购</button>
				    </view>
				  </view>
			</view>
			<view class="like-middle">
				<view :class="['like-middle-list',{'like-middle-list-active':item.check}]" v-for="item,index in goldenArea" :key="index" @click="lickBtn(index,item.check)">
					{{item.name}}
				</view>
			</view>
			<view class="like-close" @click="addBtn">
				去添加
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import {mapGetters} from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				imgUrl:this.$apiFun.imgUrl,
				host:this.$apiFun.host,
				goodsInfo: {
				        id: 1,
				        name: '示例商品',
				        image: '/static/goods.jpg',
				        minPrice: 99,
				        specs: [
				          {
				            name: '颜色',
				            items: [
				              {name: '红色', image: ''},
				              {name: '蓝色', image: ''}
				            ]
				          },
				          {
				            name: '尺寸',
				            items: [
				              {name: 'S', image: ''},
				              {name: 'M', image: ''},
				              {name: 'L', image: ''}
				            ]
				          }
				        ],
				        skus: [
				          {specs: {'颜色': '红色', '尺寸': 'S'}, price: 99, stock: 10},
				          {specs: {'颜色': '红色', '尺寸': 'M'}, price: 109, stock: 5},
				          {specs: {'颜色': '蓝色', '尺寸': 'L'}, price: 119, stock: 8}
				        ]
				      },
				      selectedSpecs: {},
				      cart: []
				    }
				  },
				  computed: {
			...mapGetters([
				'addrObj'
			]),
				    // 获取当前选中规格的SKU
				    currentSKU() {
				      return this.goodsInfo.skus.find(sku => {
				        return Object.keys(this.selectedSpecs).every(
				          key => sku.specs[key] === this.selectedSpecs[key]
				        )
				      })
				    },
				    // 计算当前选中规格的价格
				    selectedPrice() {
				      return this.currentSKU?.price
				    }
				  },
		mounted() {
			this.tag = []
			this.genreColumnListApiFun()
		},
		methods: {
			// 选择规格
			    selectSpec(specName, item) {
			      if (!this.checkSpecAvailable(specName, item)) return
			      
			      this.$set(this.selectedSpecs, specName, item.name)
			    },
			
			    // 检查规格是否可用
			    checkSpecAvailable(specName, item) {
			      const tempSpecs = {...this.selectedSpecs, [specName]: item.name}
			      
			      return this.goodsInfo.skus.some(sku => {
			        return Object.keys(tempSpecs).every(
			          key => sku.specs[key] === tempSpecs[key]
			        )
			      })
			    },
			
			    // 添加到购物车
			    addToCart() {
			      if (!this.currentSKU) {
			        uni.showToast({title: '请先选择完整规格', icon: 'none'})
			        return
			      }
			      
			      const existing = this.cart.find(item => 
			        JSON.stringify(item.specs) === JSON.stringify(this.selectedSpecs)
			      )
			
			      if (existing) {
			        existing.quantity++
			      } else {
			        this.cart.push({
			          specs: {...this.selectedSpecs},
			          price: this.currentSKU.price,
			          stock: this.currentSKU.stock,
			          quantity: 1
			        })
			      }
			    },
			
			    // 更新数量
			    updateQuantity(index, delta) {
			      const item = this.cart[index]
			      item.quantity = Math.max(1, Math.min(item.stock, item.quantity + delta))
			    },
			
			    // 验证输入数量
			    validateQuantity(index) {
			      const item = this.cart[index]
			      if (item.quantity < 1) item.quantity = 1
			      if (item.quantity > item.stock) item.quantity = item.stock
			    },
			
			    // 格式化规格显示
			    formatSpecs(specs) {
			      return Object.values(specs).join(' / ')
			    },
			open(){
				this.$refs.popup.open()
			},
			close() {
				
				this.$refs.popup.close()
				this.$store.dispatch('setlikeType',1)
			},
		},
		onReachBottom() {
			
		},
		
	}
</script>

<style scoped lang="less">
	// 置顶弹框
	.like{
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding:0 40rpx 40rpx;
		box-sizing: border-box;
		.like-tittle{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
			color: #131313;
			justify-content: space-between;
			display: flex;
			align-items: center;
			.iconfont{
				font-size: 40rpx;
			}
		}
		.like-desc{
			font-size: 25rpx;
			color: #5c5c5c;
			margin:0 auto 40rpx ;
			text-align: left;
			
		}
		.like-middle{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #f0f0f0;
			margin-bottom: 50rpx;
			.like-middle-list{
				width: 195rpx;
				height: 65rpx;
				justify-content: center;
				display: flex;
				align-items: center;
				background-color: #f6f6f8;
				color: #282828;
				margin-bottom: 40rpx;
			font-size: 25rpx;
				box-sizing: border-box;
				border-radius: 6rpx ;
			}
			.like-middle-list-active{
				background-color: #e3f6f4;
				color: #20938e;
				border: 1rpx solid #20938e;
				
			}
		}
		.like-close{
			
			width: 100%;
			height: 84rpx;
			line-height: 84rpx;
			font-size: 30rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #EB453C;
			border-radius: 6rpx ;
		
		}
	}
	.container {
	  padding: 20rpx;
	}
	
	.goods-info {
	  display: flex;
	  align-items: center;
	  padding: 20rpx;
	  .goods-image {
	    width: 200rpx;
	    height: 200rpx;
	    border-radius: 10rpx;
	  }
	  .price {
	    font-size: 36rpx;
	    color: #ff5000;
	    margin-left: 30rpx;
	  }
	}
	
	.spec-section {
	  margin-top: 30rpx;
	  .spec-title {
	    font-size: 28rpx;
	    color: #333;
	    margin-bottom: 20rpx;
	  }
	  .spec-items {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 20rpx;
	  }
	  .spec-item {
	    padding: 12rpx 30rpx;
	    border: 1rpx solid #ddd;
	    border-radius: 8rpx;
	    &.selected {
	      border-color: #ff5000;
	      background: #fff5f5;
	      color: #ff5000;
	    }
	    &.disabled {
	      opacity: 0.6;
	      background: #f5f5f5;
	    }
	  }
	}
	
	.cart-section {
	  margin-top: 40rpx;
	  .cart-title {
	    font-size: 28rpx;
	    color: #333;
	    margin-bottom: 20rpx;
	  }
	  .cart-item {
	    padding: 20rpx;
	    border-bottom: 1rpx solid #eee;
	    .specs-text {
	      color: #666;
	      margin-bottom: 20rpx;
	    }
	    .quantity-control {
	      display: flex;
	      align-items: center;
	      .btn {
	        width: 60rpx;
	        height: 60rpx;
	        line-height: 60rpx;
	        text-align: center;
	        border: 1rpx solid #ddd;
	        border-radius: 8rpx;
	        padding: 0;
	        &.disabled {
	          opacity: 0.6;
	        }
	      }
	      .quantity-input {
	        width: 100rpx;
	        text-align: center;
	        margin: 0 20rpx;
	      }
	      .price {
	        margin-left: auto;
	        color: #ff5000;
	      }
	    }
	  }
	}
	
	.footer {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: #fff;
	  padding: 20rpx;
	  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
	  .add-cart-btn {
	    background: #ff5000;
	    color: #fff;
	    border-radius: 50rpx;
	  }
	}
</style>
